<template>
	<div style="padding: 20px;">
		<!-- 头部 -->
		<el-row :gutter="14">
			<el-col :span="4">
				<div class="label-wrap category">
					<label for="">分类</label>
					<div class="warp-content">
						<el-select v-model="category_value" placeholder="请选择" style="width: 100%;">
							<el-option v-for="item in options.categoryItem" :key="item.id" :label="item.category_name" :value="item.id">
							</el-option>
						</el-select>
					</div>
				</div>
			</el-col>
			<el-col :span="7">
				<div class="label-wrap date">
					<label for="">日期：&nbsp;&nbsp;</label>
					<div class="warp-content">
						<el-date-picker style="width: 100%;" v-model="date_value" type="datetimerange" format="yyyy 年 MM 月 dd 日"
						 value-format="yyyy-MM-dd HH:mm:ss" align="right" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00', '08:00:00']">
						</el-date-picker>
					</div>
				</div>
			</el-col>
			<el-col :span="3">
				<div class="label-wrap key-work">
					<label for="">关键字：&nbsp;&nbsp;</label>
					<div class="warp-content">
						<el-select v-model="data.curentOption" placeholder="请选择" style="width: 100%;">
							<el-option v-for="(item,idx) in data.configOption.init" :key="idx" :label="item" :value="item">
							</el-option>
						</el-select>
					</div>
				</div>
			</el-col>
			<el-col :span="3">
				<el-input v-model="search_keyWork" placeholder="请输入内容" style="width: 100%;"></el-input>
			</el-col>
			<el-col :span="2">
				<el-button type="danger" style="width: 100%;" @click="getList">搜索</el-button>
			</el-col>
			<el-col :span="3">&nbsp;</el-col>
			<el-col :span="2">
				<el-button type="danger" class="pull-right" style="width: 100%;" @click="dialog_info = true">新增</el-button>
			</el-col>
		</el-row>
		<!-- 表格 -->
		<div class="black-space-30"></div>
		<el-table :data="tableData.item" border style="width: 100%" v-loading='loadingData' @selection-change="handleSelect">
			<el-table-column type="selection" width="45">
			</el-table-column>
			<el-table-column prop="title" label="标题" width="830">
			</el-table-column>
			<el-table-column prop="categoryId" label="类型" width="130" :formatter='toType'>
			</el-table-column>
			<el-table-column prop="createDate" label="日期" width="237" :formatter='toData'>
			</el-table-column>
			<el-table-column prop="user" label="管理员" width='115'>
			</el-table-column>
			<el-table-column prop="user" label="操作">
				<template slot-scope="scope">
					<el-button size="mini" type="danger" @click='deletItem(scope.row.id)'>删除</el-button>
					<el-button size="mini" type="success" @click='editItem(scope.row.id)'>编辑</el-button>
					<!-- <router-link class="margin-left-10" @click='goInfoDetailed(scope.row)'> -->
						<el-button size="mini" type="success"  @click='goInfoDetailed(scope.row)'>编辑详情</el-button>
					<!-- </router-link> -->
				</template>
			</el-table-column>
		</el-table>
		<!-- 底部分页 -->
		<div class="black-space-30"></div>
		<el-row>
			<el-col :span="12">
				<el-button size="medium" @click="deleteAll">批量删除</el-button>
			</el-col>
			<el-col :span="12">
				<el-pagination class="pull-right" background @size-change="handleSizeChange" @current-change="handleCurrentChange"
				 :page-sizes="[4, 9, 20, 30]" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>

		<!-- 新增弹窗 -->

		<DialogInfo :flag.sync='dialog_info' :category="options.categoryItem" @getListEmit='getList' :eidtObj='obj.eidtObj' />
	</div>
</template>

<script>
	import {
		reactive,
		ref,
		watch,
		onMounted,
		onActivated
	} from '@vue/composition-api';
	import DialogInfo from "./dialog/info";
	import {
		global
	} from '@/utils/global.js'
	import {
		common
	} from '@/api/common.js'
	import {
		newsGetList,
		deleteInfo
	} from '@/api/news.js'
	export default {
		components: {
			DialogInfo
		},
		setup(props, {
			root
		}) {
			const {
				confirm
			} = global();
			const {
				getInfoCategory,
				categoryItem,
				formatDate
			} = common()
			// 数据
			const options = reactive({
				categoryItem: []
			})
			const category_value = ref('')
			const date_value = ref('')
			const search_keyWork = ref('')
			const data = reactive({
				configOption: {
					init: ["id", "title"]
				},
				curentOption: '',
				pageNumber: 1,
				pageSize: 4
			});
			const loadingData = ref(false)

			let tableData = reactive({
				item: [],
				total: 0
			})
			const dialog = ref(false)
			const dialog_info = ref(false)
			const chooseId = ref([])
			const obj = reactive({
				eidtObj: {}
			})
			// 方法 
			const formatData = (res) => {
				category_value.value && (res.categoryId = category_value.value)
				date_value.value.length > 0 && (res.startTiem = date_value.value[0], res.endTime = date_value.value[1])
				data.curentOption && (res[data.curentOption] = search_keyWork.value)
				return res
			}
			const getList = () => {
				loadingData.value = true
				let requestData = {
					categoryId: '',
					startTiem: '',
					endTime: '',
					// title: '',
					// id: '',
					pageNumber: data.pageNumber,
					pageSize: data.pageSize
				}
				requestData = formatData(requestData)
				newsGetList(requestData).then(res => {
					loadingData.value = false
					const {
						data: {
							total,
							data: datas
						}
					} = res
					tableData.item = datas
					tableData.total = total
					chooseId.value = []
					category_value.value = ''
					date_value.value = []
					search_keyWork.value = ''
					data.curentOption = ''
				})
			}
			const deleteAll = (val) => { //批量删除
				if (chooseId.value.length === 0) {
					return root.$message('请选择删除的数据')
				}
				confirm({
					content: '确认删除此信息',
					fn: confirmDelete
				})
			}
			const handleSizeChange = (val) => {
				data.pageSize = val
				getList()
			}
			const handleCurrentChange = (val) => {
				data.pageNumber = val
				getList()
			}
			const deletItem = (id) => { //删除item
				chooseId.value = [id]
				confirm({
					content: '确认删除选择数据',
					fn: confirmDelete
				})
			}
			const confirmDelete = () => {
				const requestData = {
					id: chooseId.value
				}
				deleteInfo(requestData).then(res => {
					getList()
				})
			}
			const toData = (rows) => {
				return formatDate(rows.createDate * 1000, 'yyyy-MM-dd')
			}
			const toType = (rows) => {
				let id = rows.categoryId
				let item = options.categoryItem.filter(item => item.id === id)
				return item[0]&&item[0].category_name
			}
			const handleSelect = (val) => {
				const idAry = val.map(item => item.id)
				chooseId.value = idAry
			}

			const editItem = (id) => {
				const item = tableData.item.filter(item => item.id === id)
				obj.eidtObj = item[0]
				dialog_info.value = true
			}
			const goInfoDetailed = (data) => {
				root.$store.commit("info/UPDATE_STATE_VALUE", {
					id: {
						value: data.id,
						sessionKey: "infoId",
						session: true
					},
					title: {
						value: data.title,
						sessionKey: "infoTitle",
						session: true
					}
				});
				// 跳转页面
				root.$router.push({
					name: "InfoDetailed",
					params: {
						id: data.id,
						title: data.title
					}
				})
			}
			// 监听 
			watch(() => categoryItem.item, (val) => {
				options.categoryItem = val
			})
			//生命周期 
			onMounted(() => {
				getInfoCategory()
				getList()
			})
			return {
				options,
				category_value,
				date_value,
				data,
				search_keyWork,
				getList,
				dialog_info,
				loadingData,
				obj,
				// 方法
				deleteAll,
				tableData,
				handleSizeChange,
				handleCurrentChange,
				deletItem,
				toData,
				toType,
				handleSelect,
				editItem,
				goInfoDetailed
			}
		}

	}
</script>

<style lang='scss' scoped>
	.label-wrap {
		&.category {
			@include labelDom(left, 60, 40)
		}

		&.date {
			@include labelDom(right, 93, 40);
		}

		&.key-work {
			@include labelDom(right, 99, 40);
		}
	}
</style>
